<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽 slot</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <div>案例1：slot的基本用法</div>
    <Test>
        <!--<div slot="header" v-slot="{user}">自定义header1111{{user.a}}</div>-->
        <template v-slot:header="{user1}">
        <!--<template #header="{user}">-->
            <div>自定义header({{user1.a}})</div>
        </template>
        <template v-slot="{user}">
            <div>自定义body({{user.b}})</div>
        </template>

    </Test>
</div>
<hr>
<div id="root2">
    <div>案例2：Vue2.6新特性 - 动态slot</div>
    <Test>
        <template v-slot:[section]="{section,user1}">
            <div>this is {{user1.a}}</div>
        </template>
    </Test>
    <button @click="change">switch header and body</button>
</div>
<script>
    Vue.component('Test', {
        template:
            '<div>' +
                '<slot name="header" :user1="obj" :section="\'header\'">' +
                    '<div>啊啊啊 header</div>' +
                '</slot>' +
                '<slot :user="obj" :section="\'body\'">' +
                    '不不不 body' +
                '</slot>' +
            '</div>',
        data() {
            return {
                obj: { a: 1, b: 2 }
            }
        }
    })
    new Vue({ el: '#root' })


    new Vue({
        el: '#root2',
        data() {
            return {
                section: 'header'
            }
        },
        methods: {
            change() {
                this.section === 'header' ?
                    this.section = 'default' :
                    this.section = 'header'
            }
        }
    })
</script>
</body>
</html>